import { useNavigate } from 'react-router-dom'
import LofinLess from './index.module.less'
import I18nItem from '@/components/I18nItem'
import { DisconnectOutlined, LockOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Checkbox, Form, Input } from 'antd'
import { LoginFormType } from '@/interfaces/PagesType/LoginType'
import { RuleObject } from 'antd/lib/form'
import { login } from '@/api/user'
import { ResultType } from '@/mock/modules/Login/index'
import { useAppDispatch } from '@/hooks/stroe'
import { getToken, getUser } from '@/store/modules/user'
import useI18n from '@/hooks/useI18n'

export default function Login() {
  const [form] = Form.useForm()

  const dispatch = useAppDispatch()
  // 编程式路由导航
  const navigate = useNavigate()
  // 提交登录信息
  const onFinish = async (values: LoginFormType) => {
    const res = await login<LoginFormType, ResultType>(values)
    const { result } = res
    dispatch(getUser(values))
    result && dispatch(getToken(result.token))
    navigate({
      pathname: '/'
    })
  }

  // 二次密码校验
  const rePasswordValidator = (_: RuleObject, value: string) => {
    const password = form.getFieldInstance('password').input.value
    if (value) {
      if (value.trim() !== password.trim()) {
        return Promise.reject('二次密码与密码不一致!')
      } else {
        return Promise.resolve()
      }
    }
    return Promise.reject('二次密码不能为空!')
  }

  return (
    <div className={LofinLess.login_class}>
      <div className={LofinLess.login_center}>
        <div className={LofinLess['header-login']}>Slid管理系统</div>
        <div className={LofinLess['bottom-login']}>
          <Form
            name="normal_login"
            form={form}
            className={LofinLess['login-form']}
            initialValues={{
              username: 'admin',
              password: 'admin',
              repassword: 'admin',
              remember: true
            }}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              validateTrigger="onBlur"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input
                prefix={<UserOutlined className={LofinLess['site-form-item-icon']} />}
                placeholder="Username"
                autoComplete="true"
              />
            </Form.Item>
            <Form.Item
              name="password"
              validateTrigger="onBlur"
              rules={[
                {
                  required: true,
                  message: '请输入密码!'
                }
              ]}
            >
              <Input
                prefix={<LockOutlined className={LofinLess['site-form-item-icon']} />}
                type="password"
                autoComplete="true"
                placeholder="Password"
              />
            </Form.Item>
            <Form.Item
              name="repassword"
              validateTrigger="onBlur"
              rules={[{ validator: rePasswordValidator }]}
            >
              <Input
                prefix={<DisconnectOutlined className={LofinLess['site-form-item-icon']} />}
                type="password"
                autoComplete="true"
                placeholder="Please re-enter the password"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>{useI18n('remember')}</Checkbox>
              </Form.Item>
              <span className={LofinLess.i18n}>
                {/* i181n */}
                <I18nItem />
              </span>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className={LofinLess['login-form-button']}>
                {useI18n('login')}
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}
